<template>
	<view class="bef7 h100vh f30">
		<!-- 报名参赛信息 -->
		<block v-if="step==1">
			<view class="bf mt30 p3">
				<view class="f-y-c b-b pb30">
					<view class="c6">赛区选择</view>
					<view class="ml50 f-s-c flex1" @click="showArea=!showArea">
						<text>{{areaName || '全部'}}</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="f-y-c b-b pb30 mt20">
					<view class="c6">组别选择</view>
					<view class="ml50 f-s-c flex1" @click="goSelect">
						<text>{{matchSelect.contestName || (connectList.length==0?'该赛区暂无联赛':'请选择')}}</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<!-- <view class="flex b-b mt20">
					<view class="c6 mt20">俱乐部</view>
					<view class="ml50 flex1">
						<u--textarea v-model="clubValue" placeholder="请输入俱乐部"></u--textarea>
					</view>
				</view> -->
			</view>
			<view class="mt30 bf p3" v-if="matchSelect && matchSelect.contestName">
				<view class="wei pb30 b-b">详细信息</view>
				<view class="">
					<view class="p20 flex mt20">
						<view class="c6 nowrap" style="width:140rpx">报名时间</view>
						<view class="ml50 flex1">{{matchSelect.signStartTime }} 至 {{matchSelect.signEndTime}}</view>
					</view>
					<view class="p20 flex">
						<view class="c6 nowrap" style="width:140rpx">比赛时间</view>
						<view class="ml50 flex1">{{matchSelect.contestBeginTime }} 至 {{matchSelect.contestEndTime}}
						</view>
					</view>
					<view class="p20 flex">
						<view class="c6 nowrap" style="width:140rpx">比赛地点</view>
						<view class="ml50 flex1">{{matchSelect.area }}</view>
					</view>
					<view class="p20 flex">
						<view class="c6 nowrap" style="width:140rpx">联系人</view>
						<view class="ml50 flex1 f-s-c">
							<text>{{matchSelect.personName }}</text>
							<a :href="`tel:${matchSelect.personPhone}`" class="flex c0" style="text-decoration: none;">
								<text class="mr20">{{matchSelect.personPhone }}</text>
								<u-icon name="phone"></u-icon>
							</a>

						</view>
					</view>
					<view class="p20 flex">
						<view class="c6 nowrap" style="width:140rpx">报名费</view>
						<view class="ml50 flex1">球员{{matchSelect.playerExpenses }}元/人；
							教练{{matchSelect.coachExpenses }}元/人
						</view>
					</view>
				</view>
			</view>
		</block>
		<!-- 球队信息 -->
		<block v-if="step==2">
			<view class="bf mt30 p3">
				<view class="f-y-c b-b pb30">
					<view class="c6">球队Logo</view>
					<view class="ml50 f-s-c flex1">
						<uploadImg uploadText="请上传" length="1" :filePaths="teamInfo.logo ? [teamInfo.logo] : []"
							@onValue="getOne"></uploadImg>
					</view>
				</view>
				<view class="flex b-b pb30 mt20">
					<view class="c6 mt20">球队名称</view>
					<view class="ml50 flex1">
						<u--input maxlength="6" v-model="teamInfo.name" placeholder="请输入(必填)" />
					</view>
				</view>
				<view class="flex b-b pb30 mt20">
					<view class="c6 mt20">联系电话</view>
					<view class="ml50 flex1">
						<u--input v-model="teamInfo.phone" placeholder="请输入(必填)" />
					</view>
				</view>
				<!-- <view class="flex b-b pb30 mt20">
					<view class="c6 mt20">球队赛区</view>
					<view class="ml50 flex1 mt20">
						<view @click="showProvince=!showProvince">{{teamInfo.province || '请选择所属赛区(必填)'}}</view>
					</view>
				</view> -->
				<u-popup :show="showProvince">
					<view class="" style="max-height: 800rpx;overflow: auto;">
						<view @click="teamInfo.province = item.name;showProvince=!showProvince"
							v-for="(item,index) in provinceList" :key="index" class="t-c p2 b-b">{{item.name}}
						</view>
					</view>
				</u-popup>
				<!-- <view class="flex b-b mt20">
					<view class="c6 mt20"> 俱 乐 部 </view>
					<view class="ml50 flex1">
						<u--textarea v-model="teamInfo.clubRepresent" placeholder="如代表总决赛，此处填写代表赛区+名次"></u--textarea>
					</view>
				</view> -->
			</view>
			<view class="t-c pt30">
				<image src="/static/newYdsg/create-ld.png" style="width: 200rpx;height: 200rpx;margin: 0 auto;"></image>
			</view>
		</block>
		<view class="f-c pt30" v-if="matchSelect || sourceType">
			<view v-if="step == 1 && matchSelect.contestName" class="f-c w45 cf bs16 ml20"
				style="background: #3C9CFF;height: 80rpx;" @click="step=2">下一步</view>
			<view v-if="step == 2 && !sourceType" class="f-c w45 cf bs16" style="background: #89B0E8;height: 80rpx;"
				@click="step=1">
				上一步</view>
			<view v-if="step == 2" @click="submitCreate" class="f-c w45 cf bs16 ml20"
				style="background: #3C9CFF;height: 80rpx;">确认</view>
		</view>
		<u-popup closeable :show="showArea" @close="showArea=false">
			<view class="t-c p3">
				<view class="wei mb20">请选择赛区</view>
				<view class="o-y-s" style="max-height: 500rpx;">
					<view v-for="item in areaList" class="p20 b-b" @click="sureArea(item)">
						<text>{{item.value}}</text>
					</view>
				</view>
			</view>
		</u-popup>

		<u-popup closeable :show="showSelect" @close="showSelect=false">
			<view class="t-c p3">
				<view class="wei mb20">请选择组别</view>
				<view class="o-y-s" style="max-height: 500rpx;">
					<view v-for="item in connectList" class="p20 b-b" @click="sureSelect(item)">
						<text>{{item.contestName}}</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const $URL = require('../../request/request');
	const $index = require('../../request/api/v1/index');
	export default {
		data() {
			return {
				step: 1, //1-报名信息 2-球队信息
				showSelect: false,
				matchSelect: '',
				clubValue: '',
				teamInfo: {

				},
				connectList: [],
				sourceType: '',
				provinceList: [],
				showProvince: false,
				showArea: false,
				areaList: [],
				areaName: ''
			};
		},
		onLoad(option) {
			this.getFlow()
			this.getareaList()
			this.getProvince()
			if (option.sourceType) {
				this.sourceType = option.sourceType
				this.step = 2
				this.teamInfo = JSON.parse(localStorage.getItem('teamObj'))
			}
		},
		methods: {
			getProvince() {
				$index.provinceList({}).then(res => {
					this.provinceList = res.data
				})
			},
			goSelect() {
				this.showSelect = !this.showSelect
			},
			sureArea(item) {
				console.log('item', item)
				this.areaName = item.value == '全部' ? '' : item.value
				this.showArea = false
				this.getFlow()
			},
			sureSelect(item) {
				this.matchSelect = item
				this.showSelect = false
			},
			getareaList() {
				$index.areaList({
					indexId: $URL.getBaseUrl() == 'http://bm.yundongshugen.com/api' ? 1 : 2
				}).then(res => {
					this.areaList = res.data
					this.areaList.unshift({
						code: '-1',
						value: '全部'
					})
				});
			},
			getFlow() {
				$index.contestList({
					pageSize: 9999,
					pageNum: 1,
					indexId: $URL.getBaseUrl() == 'http://bm.yundongshugen.com/api' ? 1 : 2,
					areaName: this.areaName
				}).then(res => {
					console.log('res', res)
					this.connectList = res.rows
					if (res.rows.length == 0) {
						this.matchSelect.contestName = ''
					}
				});
			},
			getOne(e) {
				console.log('ee', e)
				this.teamInfo.logo = e.detail[0];
			},
			submitCreate() {
				if (this.sourceType) {
					// 编辑
					$index.editTeam(this.teamInfo).then(res => {
						this.$u.toast('操作成功')
						localStorage.setItem('teamObj', JSON.stringify(res.data))
						setTimeout(() => {
							uni.redirectTo({
								url: `/pages/business/matchDetail?contestId=${this.teamInfo.contestId}&teamId=${res.data.id}`
							});
						}, 1500)
					})
					return
				}
				// 创建
				$index.createTeam({
					...{
						contestId: this.matchSelect.id
					},
					...this.teamInfo
				}).then(res => {
					this.$u.toast('操作成功')
					localStorage.setItem('teamObj', JSON.stringify(res.data))
					setTimeout(() => {
						uni.redirectTo({
							url: `/pages/business/matchDetail?contestId=${this.matchSelect.id}&teamId=${res.data.id}`
						});
					}, 1500)
				})
			}
		}
	};
</script>